<template>
    <div>
        <h1>复习之前得Vue 基础 操作,包括 ref 和 reactive computed watch  "v-bind" "v-m" v-on watch</h1>
        <h2>测试 基本的响应式对象</h2>
        人员名称：<input v-model="person.name"/>
        姓：<input v-model="firstName">
        名：<input v-model="secondName">
        人员住址：{{ person.address }}
        人员年龄: {{ age }}

        <button @click="changeAge">点我过生日</button>
        <button @click="changeRefAge">虚岁生日</button>
        <button @click="changeAddress">搬家啦</button>
        <button @click="changeRefAddress">虚拟人搬家</button>
        
    </div>
</template>

<script setup lang="ts"  name = "Persoon">
import { get } from 'node_modules/axios/index.cjs';
import { ref,reactive,watch,watchEffect,computed,defineExpose, toRef, toRefs } from 'vue'
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'


let firstName = ref('小')
let secondName = ref('明')


let fullName = computed({
    get(){
        return firstName.value + "_" + secondName.value;
    },
    set(val){
        let splitArry = val.split("_")
        firstName.value = splitArry[0]
        secondName.value = splitArry[1]
    }
})

// 定义 基础 person对象
let person = reactive({
    name: fullName,
    address:'香港涪城区'
})


let age    = ref(19)

function changeAge(){
    age.value ++;
}

function  changeAddress(){
    person.address = "香港大湾区"
}



// 监视年龄，快到30岁就开始提醒
watch(age,(newValue,oldValue)=>{
    if(age.value == 29){
        alert("准备过大生了哦~~~")
    }
    console.log('newValue',newValue);
    console.log('oldValue',oldValue);
})
let count = 1
//使用watchEffect 监视
let watchStop = watchEffect(()=>{
    if(person.address.match("大湾区")){
        alert('有钱人');
        count++;
    }else{
        if(count > 2)
            alert('回归平淡了')
    }
    
})

let refAge = toRef(age)

function changeRefAge(){
    refAge.value++
}

//这是将对象中的属性提取出来的哇
let {name,address} = toRefs(person)

function changeRefAddress(){
    address.value +='`'
}


//生命周期
onBeforeMount(()=>{
    console.log(' beforeMount ......')
})

onMounted(()=>{
    console.log('挂载完毕'+' mounted ')
})

onBeforeUpdate(()=>{
    console.log('beforeUpdate')
})

onUpdated(()=>{
    console.log('updated')
})

onBeforeUnmount(()=>{
    console.log('onBeforeUnmount')
})


onUnmounted(()=>{
    console.log("onUnmounted")
})


defineExpose({person,age})
</script>

<style>
button{
    margin-right: 30px;
}
</style>

